<template>
  <el-drawer v-model="isShow" size="50%" :title="title" direction="rtl" :before-close="handleClose">
    <hr>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基础信息" name="first"></el-tab-pane>
      <el-tab-pane label="选项信息" name="second"></el-tab-pane>
      <el-tab-pane label="详细信息" name="third"></el-tab-pane>
    </el-tabs>
    <el-form :model="formData" ref="form" :rules="rules">
      <div v-show="activeName === 'first'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="community_code">
              <label style="width: 100%;"><span class="red">*</span>所属小区</label>
              <el-select style="width: 100%;" v-model="formData.community_code" class="m-2" placeholder="请选择">
                <el-option v-for="item in communityList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title">
              <label style="width: 100%;"><span class="red">*</span>投票标题</label>
              <el-input style="width: 100%;" v-model="formData.title" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="start_time">
              <label style="width: 100%;"><span class="red">*</span>开始时间</label>
              <el-date-picker style="width: 100%;" v-model="formData.start_time" type="datetime"
                placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="end_time">
              <label style="width: 100%;"><span class="red">*</span>结束时间</label>
              <el-date-picker style="width: 100%;" v-model="formData.end_time" type="datetime"
                placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <label style="width: 100%;">是否支持多选</label>
              <el-radio-group v-model="formData.multi" class="ml-4">
                <el-radio v-for="item in typeList" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <label style="width: 100%;">是否匿名</label>
              <el-radio-group v-model="formData.anonymous" class="ml-4">
                <el-radio v-for="item in anonymousList" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <label style="width: 100%;">状态</label>
              <el-radio-group v-model="formData.status" class="ml-4">
                <el-radio v-for="item in stateList" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </div>
      <!-- ==========================================tab切换页面======================================= -->
      <el-form-item v-show="activeName === 'second'" prop="options">
        <DynamicTable v-model:tableList="formData.options" />
      </el-form-item>

      <!-- ==========================================tab切换页面======================================= -->
      <div v-show="activeName === 'third'">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <label style="width: 100%;">备注</label>
              <el-input type="textarea" :rows="6" v-model="formData.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <label style="width: 100%;">小区图片</label>
              <!-- 图片组件 -->
              <uploadImg v-model:imgUrl="formData.img_url" :limit="3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="description">
          <label style="width: 100%;"><span class="red">*</span>内容</label>
          <!-- 富文本组件 -->
          <editor :value="formData.description" :min-height="192" @update:input='changeInput' />
        </el-form-item>
      </div>
      <div style="display: flex;justify-content: end;margin-top: 50px;">
        <el-form-item>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </div>
    </el-form>

  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { addListApi, getListInfoApi, editListApi } from '@/api/ticket/index.js'
import uploadImg from '@/components/Table/uploadImg.vue'
import { ElMessage } from 'element-plus'
import editor from '@/components/Table/Editor.vue'
import { usecommunityList } from '@/hooks/owners/member.js'
import { useType, useState, useAnonymous } from '@/hooks/ticket/index.js'
import DynamicTable from './DynamicTable.vue'
// =============================================================================

const isShow = ref(false)
const form = ref(null)
const activeName = ref('first')
// 小区数据
const communityList = usecommunityList(true)

// 类型
const typeList = useType()
// 状态
const stateList = useState()
// 匿名状态
const anonymousList = useAnonymous()
const title = computed(() => formData.value.id ? '修改投票信息' : '添加投票信息')
const defaultFormData = () => {
  return {
    anonymous: 1,    //1 匿名  0 不匿名
    community_code: "",
    description: '',
    end_time: '',
    img_url: '',
    multi: 0,
    options: [],
    remark: '',
    start_time: '',
    status: 0,
    title: ''
  }
}
const rules = {
  community_code: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  title: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  start_time: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  end_time: [
    { required: true, message: '请选择', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  options: [
    { required: true, message: '请添加', trigger: 'blur' },
  ],
}
// 表单数据
let formData = ref(defaultFormData())
const emit = defineEmits(['initData'])
// ==========================================================================

// 富文本
const changeInput = (val) => {
  // console.log(val);
  formData.value.description = val
}

// 添加============修改
const onSubmit = async () => {
  try {
    await form.value.validate()
    formData.value.start_time = +formData.value.start_time
    formData.value.end_time = +formData.value.end_time
    formData.value.id ? await editListApi(formData.value) : await addListApi(formData.value)
    ElMessage.success(formData.value.id ? '修改成功' : '添加成功')
    isShow.value = false
    emit('initData')
  } catch (err) {
    console.log(err);
    ElMessage.error('必填项输入后才能提交喔')
  }
}

// 抽屉关闭前的回调
const handleClose = () => {
  form.value.resetFields()
  formData.value = defaultFormData()
  isShow.value = false
}

// 修改回显
const edit = async (id) => {
  // console.log(id);
  const { data } = await getListInfoApi(id)
  formData.value = data
  isShow.value = true
}
defineExpose({ isShow, edit })
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
</style>